



const Div1=document.getElementById('div1'); //元素
const divList=document.getElementsByTagName('div') //集合
console.log(divList.length)
console.log(divList[0])

const containerList=document.getElementsByClassName('.container')//集合
const pList=document.querySelectorAll('p') //集合


// DOM节点的property,修改对象属相，不会体现到html结构中

console.log(p.style.width) //获取样式
p.style.width='200px'  //修改样式
p.className='className'
console.log(p1.nodeName);
console.log(p1.nodeType) //1

// 对节点属性修改，会改变html结构
p1.setAttribute('data-name','dd')
p1.getAttribute('data-name')
p1.setAttribute('style','font-size:50px')

// 以上两者都可能引起DOM重新渲染，尽量使用property去修改


// DOM结构操作

const div1=document.getElementById('div1');
const div2=document.getElementById("div2");
//新建节点
const new_p1=document.createElement('p');




new_p1.innerHTML='this is new_p1'
div1.appendChild(new_p1)

//移动节点
const p1=document.getElementById('p1');
div2.appendChild(p1)

//获取p1的父元素
console.log(p1.parentNode) 

// 获取子元素列表
const div1ChildNodes=div1.childNodes  //(会打印出文本元素)
console.log(div1ChildNodes);

// 过滤出文本标签
const div1ChildNodesP=Array.prototype.slice.call(div1.childNodes).filter((child)=>{
    if(child.nodeType===1){
        return true
    }
    return false
})
console.log('div1ChildNodeP',div1ChildNodesp)

// 删除节点

